<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>推书搜索页</title>
</head>
<link rel="stylesheet" href="css/searchpage.css" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/Detail.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2541877_3w46bwcvdhx.css" <link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="font_8nnu897a76k/iconfont.css" />
<script src="script/book.js"></script>

<body>
    <header>
        <div class="heart">
            <a href="index.html"><img src="images/推书-logo.png" alt="logo" /></a>
            <div class="select">
                <button>分类</button>
                <ul class="ul">
                    <li>文学类</li>
                    <li>科技类</li>
                    <li>哲学类</li>
                    <li>政治类</li>
                </ul>
            </div>
            <div class="search"><input type="search" value="请搜索"><button><img src="images/search.png" alt="搜索"></button></div>
        </div>

    </header>
    <section>
        <div>搜索的东西</div>
    </section>
    <div class="wrap">
        <!-- 详情页 -->
        <div class="Mask">

            <!-- 页面 -->
            <div>
                <div class="close"></div>
                <!-- 内容 -->
                <div class="detail">
                    <div class="border left"></div>
                    <div class="border right"></div>
                    <div class="bookinfo"><img src="images/bookcover.png" alt="bookcover">
                        <h1>书名</h1>
                        <div class="first"><img src="images/作者.png" alt="icon"><span>作者: <a href="#">xx</a></span><br>
                            <img src="images/出.png" alt="icon"><span>出版社: <a href="#">xxxxx</a></span></div>
                        <div class="mid"><img src="images/时间.png" alt="icon"><span>出版时间: xxxx/xx/xx</span><br>
                            <img src="images/图书馆.png" alt="icon"><span>图书馆藏书：x本<br><span>x楼x架xx</span></span>
                        </div>
                        <div class="bottom"><img src="images/书(1).png" alt="icon" class="bottomfir">
                            <a href="#"><i class="iconfont icon-snssharedoubanon"></i></a>
                            <a href="#"><i class="iconfont icon-zhihu-square"></i></a>
                            <br><img src="images/购买.png" alt="icon">
                            <a href="#"><i class="iconfont icon-jingdongbaitiao"></i></a>
                            <a href="#"><i class="iconfont icon-dangdangwang"></i></a>
                            <a href="#"><i class="iconfont icon-amazon"></i></a>
                        </div>
                    </div>
                    <article>
                        <div>
                            <h2>作者简介</h2>
                            <p> 作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。</p>
                        </div>
                        <div>
                            <h2>书籍简介</h2>
                            <p> 这本书很好看，真的。这本书很好看，真的。这本书很好看，真的。这本书很好看，真的。这本书很好看，真的。这本书很好看，真的。这本书很好看，真的。这本书很好看，真的。这本书很好看，真的。这本书很好看，真的。</p>
                        </div>
                    </article>
                </div>
            </div>
        </div>


        <div class="mainpage">
            <div class="book"><img src="images/book.png" alt="book">
                <div class="star"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星 "><img src="images/白.png" alt="五角星"></div>
                <div class="info"><b>书名</b> <b>作者</b></div>
            </div>
            <div class="book"><img src="images/book.png" alt="book">
                <div class="star"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星 "><img src="images/白.png" alt="五角星"></div>
                <div class="info"><b>书名</b> <b>作者</b></div>
            </div>
            <div class="book"><img src="images/book.png" alt="book">
                <div class="star"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星 "><img src="images/白.png" alt="五角星"></div>
                <div class="info"><b>书名</b> <b>作者</b></div>
            </div>
            <div class="book"><img src="images/book.png" alt="book">
                <div class="star"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星 "><img src="images/白.png" alt="五角星"></div>
                <div class="info"><b>书名</b> <b>作者</b></div>
            </div>
            <div class="book"><img src="images/book.png" alt="book">
                <div class="star"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星 "><img src="images/白.png" alt="五角星"></div>
                <div class="info"><b>书名</b> <b>作者</b></div>
            </div>
            <div class="book"><img src="images/book.png" alt="book">
                <div class="star"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星 "><img src="images/白.png" alt="五角星"></div>
                <div class="info"><b>书名</b> <b>作者</b></div>
            </div>
            <div class="book"><img src="images/book.png" alt="book">
                <div class="star"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星 "><img src="images/白.png" alt="五角星"></div>
                <div class="info"><b>书名</b> <b>作者</b></div>
            </div>
            <div class="book"><img src="images/book.png" alt="book">
                <div class="star"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星 "><img src="images/白.png" alt="五角星"></div>
                <div class="info"><b>书名</b> <b>作者</b></div>
            </div>
        </div>


        <footer>
            <div>
                <a href="#">&lt;</a>
                <a href="#">1</a>
                <a href="#" class="current">2</a>
                <a href="#">3</a>
                <a href="#">...</a>
                <a href="#">x</a>
                <a href="#">&gt;</a>
            </div>
            <br><br>
            <span>共x页</span>
        </footer>
        <script>
            /*下拉框 */
            var select = document.querySelector('.select');

            var option = document.querySelector('.ul');
            select.onmouseover = function() {
                option.style.display = 'block';
            }
            select.onmouseout = function() {
                    option.style.display = 'none';
                }
                // option.onmouseover = function() {
                //     option.style.display = 'block';
                // }
                // option.onmouseout = function() {
                //     option.style.display = 'none';
                // }
            for (var i = 0; i < option.children.length; i++) {
                option.children[i].onclick = function() {
                    location.href = 'classify.html';
                }
            }
        </script>
    </div>
</body>

</html>